<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>

<div class="bg-dark">
  <nav class="navbar navbar-expand-lg navbar-dark container">
    <a class="navbar-brand" href="./">
      <img src="./images/logo.jpg" width="30" height="30" class="d-inline-block align-top" alt="">
      Bootstrap
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto my-menu">
        <li class="nav-item active">
          <a class="nav-link" href="javascript:void(0)">推荐</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</div>

<div class="container">
  <div class="row">
    <div class="col-xl-8 col-lg-8 col-md-6 col-sm-12">
      <div id="carouselExampleCaptions" class="carousel slide carousel-fade" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
          <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="./images/pic1.png" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="./images/pic2.webp" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Second slide label</h5>
              <p>Some representative placeholder content for the second slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="./images/pic3.webp" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
              <h5>Third slide label</h5>
              <p>Some representative placeholder content for the third slide.</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev my-prev" type="button" data-target="#carouselExampleCaptions"  data-slide="prev">
          <svg t="1625196687949" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2208" width="40" height="40"><path d="M945.030053 10.437233a77.204827 77.204827 0 0 0-77.588548 0l-738.856329 410.582328V44.780334a43.245447 43.245447 0 0 0-86.490894 0v458.585925c0 2.532564-1.266282 5.065128-1.266282 8.863974 0 2.532564 1.266282 6.33141 1.266282 8.863974v459.852207a43.245447 43.245447 0 0 0 86.490894 0v-377.543881l738.856329 410.582328a86.836244 86.836244 0 0 0 39.408229 10.130256 77.933898 77.933898 0 0 0 38.141947-10.130256 73.981563 73.981563 0 0 0 38.141947-64.618751V75.247845a73.981563 73.981563 0 0 0-38.103575-64.810612zM896.527617 933.978865L136.029379 512.115117l765.563366-424.396313z" p-id="2209"></path></svg>
        </button>
        <button class="carousel-control-next my-next" type="button" data-target="#carouselExampleCaptions"  data-slide="next">
          <svg t="1625196780268" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3020" width="40" height="40"><path d="M832 160.128c0-17.664-14.336-32-32-32S768 142.464 768 160.128l0 282.88L214.592 134.592c-18.176-10.112-39.936-10.048-58.112 0C138.24 144.768 127.424 162.88 127.424 183.168l0 656.64c0 20.224 10.816 38.464 29.056 48.576C165.568 893.44 175.488 896 185.472 896s19.968-2.56 29.056-7.616L768 579.968l0 284.096c0 17.664 14.336 32 32 32s32-14.336 32-32L832 160.128zM191.808 829.248 188.672 192l573.312 319.488L191.808 829.248z" p-id="3021"></path></svg>
        </button>
      </div>
    </div>
    <div class="col-xl-4 col-lg-4 col-md-6 col-sm-12">
      <div class="round-girl ">
        <img src="./images/pic3.webp" alt="">
      </div>
    </div>
  </div>

  <div class="row my-list">
    <!--<div class="col-xl-3 col-lg-4 col-md-6 col-sm-12">
      <div class="card">
        <img src="./images/pic3.webp" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>-->
  </div>
</div>


<script src="./js/index.js"></script>
</body>
</html>